/**
 * Created by ste on 2018/1/9.
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native';
import { observer } from 'mobx-react/native';

import Circle from './Circle';
const styles = StyleSheet.create({
  root: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 120,
    padding: 10,
  },
  img: {
    width: 90,
    height: 90,
  },
  rightView: {
    width: 200,
  },
  rightBottomView: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  button: {
    borderColor: '#000',
    borderWidth: StyleSheet.hairlineWidth,
    justifyContent: 'center',
    padding: 10,
  },

});
@observer
export default class Detail extends Component {
  minus = (index) => {
    const {CarData} = this.props;
    CarData.minus(index);
  };
  plus = (index) => {
    const {CarData} = this.props;
    CarData.plus(index);
  };
  clickChecked = () => {
    const { index, CarData } = this.props;
    CarData.checked(index);
  };
  render() {
    const { data:{ id, name, price, count, img,checked }, index } = this.props;
    return (
      <View style={styles.root}>
        <Circle checked={checked} clickChecked={() => this.clickChecked()} />
        <Image style={styles.img} source={{uri:img}}/>
        <View>
          <View style={styles.rightView}>
            <Text>{name}</Text>
            <View style={styles.rightBottomView}>
              <Text>{'¥'+price}</Text>
              <TouchableOpacity onPress={() => this.minus(index)}>
                <Text style={styles.button}>-</Text>
              </TouchableOpacity>
              <Text>{count}</Text>
              <TouchableOpacity onPress={() => this.plus(index)}>
                <Text style={styles.button}>+</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

